<template>
  <van-header title="视频"></van-header>
  <div class="loading" v-if="mvlist.data.length == 0">
    <van-loading size="24px" vertical>加载中...</van-loading>
  </div>
  <div class="page" v-else>
    <van-list class="video-list">
      <div class="video-list__item" v-for="(item, index) in mvlist.data" :key="item.id">
        <div class="video-list__player" :ref="dplayerRef">
          <img :src="item.cover" alt="" />
        </div>
        <div class="video-list__content" @click="handleItemClick(item.id, index)">
          <p>{{ item.name }}</p>
          <p>
            <span>{{ item.artistName }}</span>
            <span></span>
          </p>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import VanHeader from '@/components/header/Header.vue';
import DPlayer from 'dplayer';
import mvlist from '@/api/mock/mv.json';
import { getMvInfo, getMvUrl } from '@/api/wangyi/video';

import { useMyStores } from '@/store';

const { playerStore, audioPlayState } = useMyStores();

let dplayer = ref();
let dplayers = ref<any>([]);
const dplayerRef = (el: any) => {
  dplayers.value.push(el);
};
let dplayerId = ref();
let dplayerIndex = ref();
let dplayerIds = ref<any>([]);
// onMounted(() => {
//   dplayers.forEach(dp => {
//     dp.
//   });
// })
watch(dplayerId, (newId, oldId) => {
  // if (newId == oldId) {
  //   return;
  // }
  // 暂停歌曲播放
  if (audioPlayState.value) {
    playerStore.SET_AUDIO_PLAY_STATE(false);
  }
  let index = dplayerIds.value.findIndex((item: any) => item == newId);
  if (index == -1) {
    dplayerIds.value.push(newId);
    getMvUrl(newId).then(res => {
      console.log(res);
      dplayer.value = new DPlayer({
        container: dplayers.value[dplayerIndex.value],
        autoplay: true,
        video: {
          url: res.data.url
        }
      });
    });
  }
});

const handleItemClick = (id: number, index: number) => {
  dplayerId.value = id;
  dplayerIndex.value = index;
  // getMvUrl(id).then(res => {
  //   console.log(res);
  //   dplayer.value = new DPlayer({
  //     container: dplayers.value[index],
  //     autoplay: true,
  //     video: {
  //       url: res.data.url
  //     }
  //   });
  // });
};
</script>

<style lang="less" scoped>
.video-list {
  .video-list__item {
    border-radius: 10px;
    background-color: rgb(0, 0, 0);
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    video {
      width: 100%;
    }
    .video-list__player {
      width: 100%;
      height: 200px;
      img {
        width: 100%;
        height: 100%;
      }
      .dplayer-comment-box,
      .dplayer-icons-left,
      .dplayer-icons-right {
        display: none;
      }
    }
    .video-list__content {
      padding: 10px 8px;
      p {
        color: rgb(255, 255, 255);
      }
      p:first-child {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 1px;
        padding-bottom: 5px;
      }
      p:last-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>
